<template>
  <div class="attendance-container">
    <h1>我的考勤记录</h1>
    
    <!-- 显示当前用户信息 -->
    <div class="user-info">
      <p>欢迎，{{ userProfile.fullName }} (学生)</p>
      <router-link to="/student/dashboard">返回Dashboard</router-link>
    </div>

    <div class="records-section">
      <div class="records-header">
        <h2>考勤记录</h2>
        <button @click="loadAttendanceRecords" class="refresh-btn">刷新记录</button>
      </div>
      <table class="records-table">
        <thead>
          <tr>
            <th>日期</th>
            <th>状态</th>
            <th>签到时间</th>
            <th>备注</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="record in attendanceRecords" :key="record.id">
            <td>{{ formatDate(record.recordDate) }}</td>
            <td>{{ getAttendanceStatusText(record.status) }}</td>
            <td>{{ formatDateTime(record.recordedAt) }}</td>
            <td>{{ record.remarks || '无' }}</td>
          </tr>
          <tr v-if="!attendanceRecords || attendanceRecords.length === 0">
            <td colspan="4" class="no-records">暂无考勤记录</td>
          </tr>
        </tbody>
      </table>
    </div>

    <!-- 错误提示 -->
    <div v-if="error" class="error-message">
      {{ error }}
    </div>

    <!-- 成功提示 -->
    <div v-if="success" class="success-message">
      {{ success }}
    </div>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';

export default {
  name: 'StudentRecords',
  setup() {
    // 用户信息
    const userProfile = ref({});
    const studentNumber = ref(''); // 存储学号
    
    // 考勤记录
    const attendanceRecords = ref([]);
    
    // 状态信息
    const error = ref('');
    const success = ref('');

    // 获取用户信息
    const loadUserProfile = async () => {
      try {
        const response = await fetch('/user/profile', {
          method: 'GET',
          credentials: 'include',
          headers: {
            'Content-Type': 'application/json'
          }
        });
        
        const result = await response.json();
        if (result.code === 1) {
          userProfile.value = result.data;
          // 保存学号
          if (result.data.studentNumber) {
            studentNumber.value = result.data.studentNumber;
          }
        } else {
          error.value = result.msg || '获取用户信息失败';
        }
      } catch (err) {
        error.value = '网络错误，请稍后重试';
      }
    };

    // 获取考勤记录
    const loadAttendanceRecords = async () => {
      if (!studentNumber.value) {
        error.value = '无法获取学号信息';
        return;
      }
      
      try {
        const response = await fetch(`/attendance/record?studentNumber=${studentNumber.value}`, {
          method: 'GET',
          credentials: 'include',
          headers: {
            'Content-Type': 'application/json'
          }
        });
        
        const result = await response.json();
        if (result.code === 1) {
          attendanceRecords.value = result.data;
          success.value = '考勤记录刷新成功';
        } else {
          error.value = result.msg || '获取考勤记录失败';
        }
      } catch (err) {
        error.value = '网络错误，请稍后重试';
      }
    };

    // 获取考勤状态文本
    const getAttendanceStatusText = (status) => {
      switch (status) {
        case '1': return '出勤';
        case '2': return '缺勤';
        case '3': return '迟到';
        case '4': return '请假';
        case '5': return '早退';
        default: return '未知';
      }
    };

    // 格式化日期
    const formatDate = (dateString) => {
      if (!dateString) return '';
      const date = new Date(dateString);
      return date.toLocaleDateString('zh-CN');
    };

    // 格式化日期时间
    const formatDateTime = (dateTimeString) => {
      if (!dateTimeString) return '';
      const date = new Date(dateTimeString);
      return date.toLocaleString('zh-CN');
    };

    // 初始化
    onMounted(async () => {
      await loadUserProfile();
      await loadAttendanceRecords();
    });

    return {
      userProfile,
      attendanceRecords,
      error,
      success,
      loadAttendanceRecords,
      getAttendanceStatusText,
      formatDate,
      formatDateTime
    };
  }
};
</script>

<style scoped>
.attendance-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  font-family: Arial, sans-serif;
}

.user-info {
  background-color: #f5f5f5;
  padding: 15px;
  border-radius: 5px;
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.records-section {
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 20px;
  margin-bottom: 20px;
}

.records-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.records-header h2 {
  margin: 0;
}

.refresh-btn {
  background-color: #9E9E9E;
  color: white;
  padding: 8px 15px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.refresh-btn:hover {
  background-color: #757575;
}

.records-table {
  width: 100%;
  border-collapse: collapse;
}

.records-table th, .records-table td {
  border: 1px solid #ddd;
  padding: 12px;
  text-align: left;
}

.records-table th {
  background-color: #f2f2f2;
  font-weight: bold;
}

.records-table td.no-records {
  text-align: center;
  font-style: italic;
  color: #666;
}

.error-message {
  background-color: #f8d7da;
  color: #721c24;
  padding: 15px;
  border-radius: 5px;
  margin-bottom: 20px;
}

.success-message {
  background-color: #d4edda;
  color: #155724;
  padding: 15px;
  border-radius: 5px;
  margin-bottom: 20px;
}
</style>